import mprc from '../../utils/mprc.js';

const {
	Stage,
	Group,
	Rect,
	Shape,
	Graphics
} = mprc;

let group;
let stage;

let canvasCtx;
let ruler;

let isGesture = false;
let startDeg = 0;
let paths;



class Paths {
	constructor(option) {
		this.option = option || {};

		this.ctx = canvasCtx.getContext('2d');
	}

	draw() {

	}

	beginPath() {
		this.ctx.beginPath()
	}

	moveTo(x, y) {
		this.ctx.moveTo(x, y)
	}

	lineTo(x, y) {
		this.ctx.lineTo(x, y)
		this.ctx.lineWidth = 5;
		this.ctx.strokeStyle = 'blue';
	}

	stroke() {
		this.ctx.stroke();
	}

	clear(x, y, width, height) {
		this.ctx.fillStyle = "#ffffff";
		this.ctx.fillRect(x, y, width, height);
		group.destroy();
	}

	setStartPoints(x, y) {
		this.startX = x;
		this.startY = y;
	}

}

class Demo extends Graphics {
	constructor(option) {
		super();
		this.option = option || {};
	}

	test() {
		console.log('test')
	}

	setStartPoints(x, y) {
		this.startX = x;
		this.startY = y;
	}
}

let paths2;

Page({
	data: {
		systemInfo: wx.getSystemInfoSync(),
		width: 0,
		height: 0,
		mode: 'dis',
		onRuler: false
	},
	onLoad(options) {
		this.setData({
			width: this.data.systemInfo.windowWidth,
			height: this.data.systemInfo.windowHeight - 100,
		});

	},

	onReady() {
		this.canvas();
	},
	canvas: async function () {
		canvasCtx = await this.getContainer('#canvas');
		stage = new Stage(canvasCtx, this.data.width, this.data.height);
		const hitCanvas = await this.getContainer('#hitCanvas');
		stage.setHitCanvas(hitCanvas);
	},

	// 事件监听
	touchstart(event) {
		stage.touchStartHandler(event);
		let touch = event.touches;
		if (touch.length >= 2) {
			isGesture = true;
			startDis = this.getDis(touch[0], touch[1]);
			startDeg = this.getDeg(touch[0], touch[1]);
			// console.log(startDis, startDeg)
		}

		if (this.data.mode == 'dis') {
			return;
		}

		// paths = new Paths({})
		// paths.beginPath();
		// paths.moveTo(touch[0].x, touch[0].y)
		// paths.setStartPoints(touch[0].x, touch[0].y)

		paths2 = new Demo({})
		paths2.clear().beginPath().moveTo(touch[0].x, touch[0].y)
		paths2.setStartPoints(touch[0].x, touch[0].y)

		group.add(paths2)

	},

	touchmove(event) {
		stage.touchMoveHandler(event);
		let touch = event.touches;
		if (touch.length >= 2 && isGesture) {
			let nowDis = this.getDis(touch[0], touch[1]);
			let nowDeg = this.getDeg(touch[0], touch[1]);

			ruler.rotation = nowDeg - startDeg;
			stage.update();
		}

		if (this.data.mode == 'dis') {
			return;
		}

		if (this.data.mode == 'paths') {
			paths2.lineTo(touch[0].x, touch[0].y)
			paths2.stroke()
		} else if (this.data.mode == 'line') {
			paths2.lineTo(touch[0].x, paths2.startY)
			paths2.stroke()
		} else if (this.data.mode == 'vline') {
			paths2.lineTo(paths2.startX, touch[0].y)
			paths2.stroke()
		} else {
			// ruler

			//起点和当前点的距离
			let dis = this.getDis({
				x: paths2.startX,
				y: paths2.startY
			}, {
				x: touch[0].x,
				y: paths2.startY
			});

			paths2.lineTo(touch[0].x, paths2.startY + dis * Math.tan(ruler.rotation * Math.PI / 180))
			paths2.stroke()
		}

		stage.update();
	},

	touchend(event) {
		stage.touchEndHandler(event);
		if (isGesture) {
			isGesture = false;
		}

		stage.update()

		this.data.onRuler = false
	},
	getDis(point, point2) {
		let x = point2.x - point.x;
		let y = point2.y - point.y;
		return Math.sqrt(x * x + y * y);
	},
	getDeg(point, point2) {
		let x = point2.x - point.x;
		let y = point2.y - point.y;
		return Math.atan2(y, x) * 180 / Math.PI;
	},

	// 获取canvas对象方法
	getContainer(id) {
		return new Promise((resolve, reject) => {
			const query = wx.createSelectorQuery();
			query
				.select(id)
				.fields({
					node: true,
					size: true
				})
				.exec(res => {
					const canvas = res[0].node;
					resolve(canvas);
				});
		});
	},
	draw() {
		// 集合容器，设置透明度
		group = new Group();
		group.x = 0;
		group.y = 0;
		group.alpha = 1;

		ruler = new Rect(750, 80, {
			fillStyle: '#58727e'
		});

		ruler.x = 188
		ruler.regX = 750 / 2;
		ruler.y = 280
		ruler.regY = 40;
		ruler.rotation = 60;
		this.data.mode = 'dis'

		ruler.on('drag', function (event) {
			ruler.x += event.dx;
			ruler.y += event.dy;
			// console.log(ruler.x, ruler.y)
			// console.log(ruler.regX, ruler.regY)
			stage.update();
		})

		ruler.on('touchstart', (event) => {
			this.data.onRuler = true;
		})

		group.add(ruler);
		// 将集合放入根容器
		stage.add(group);
		// 更新渲染
		stage.update();
	},
	clear() {
		// paths.clear(0, 0, this.data.width, this.data.height)

		let ctx = canvasCtx.getContext('2d')

		ctx.fillStyle = "#ffffff";
		ctx.fillRect(0, 0, this.data.width, this.data.height);
		group.destroy();
	},
	setMode(e) {
		this.data.mode = e.currentTarget.dataset.mode
	}
});